<template>
    <!--登录表单容器-->
    <div class="login_container">
   <!-- 登录区域   -->
      <div class = "login_box">
      <!--头像-->
        <div class="avatar_box">
         <img src="../assets/img/time.gif">
        </div>
        <!--表单 ref是绑定页面中的dom元素 取页面中的dom元素使用$refs 两值对应一致-->
        <el-form :model="LoginForm" :rules="LoginRules" ref="LoginForm" label-width="0px" class="login-Form">
          <el-form-item  prop="userName">
            <el-input v-model="LoginForm.userName" placeholder="请输入用户名称" prefix-icon="el-icon-user-solid"></el-input>
          </el-form-item>
          <el-form-item  prop="passWord">
            <el-input v-model="LoginForm.passWord" placeholder="请输入登录密码" prefix-icon="el-icon-lock"></el-input>
          </el-form-item>
          <el-form-item  prop="verifyCode">
            <div class="verifyCode_box">
              <el-input v-model="LoginForm.verifyCode" placeholder="请输入验证码" prefix-icon="el-icon-mobile" class="verify_code"></el-input>
              <img src="../assets/img/msFXK1.jpg" class="verify_img">
            </div>
          </el-form-item>
          <el-form-item class = "login_but">
            <el-button type="primary" @click="submitForm('LoginForm')">立即创建</el-button>
            <el-button @click="resetForm('LoginForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
</template>

<script>
    export default {
        name: "Login",
      data() {
        return {
          LoginForm: {
            userName: '',
            passWord: '',
            verifyCode:''
          },
          LoginRules: {
            userName: [
              { required: true, message: '请输入用户名称', trigger: 'blur' },
              { min: 3, max: 16, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            passWord: [
              { required: true, message: '请输入用户密码', trigger: 'blur' },
              { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
            ],
            verifyCode: [
              { required: true, message: '请输入验证码', trigger: 'blur' },
            ]
          }
        };
      },
      methods: {
        submitForm(formName) {
          this.$refs[formName].validate((valid) => {
            if (valid) {
              this.$router.push("/main");
            } else {
              console.log('error submit!!');
              return false;
            }
          });
        },
        resetForm(formName) {
          this.$refs[formName].resetFields();
        }
      }
    }
</script>

<style lang="less" scoped>
  .login_container{
    height: 100%;
    background-color: aquamarine;
  }

  .login_box{
    width: 450px;
    height: 380px;
    background-color: white;
    border-radius: 3px;               //边框半径
    position: absolute;              //位置 绝对定位
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%); //移动配合letf top 居中

    .avatar_box{
      width: 130px;
      height: 130px;
      border: 1px solid #eeeeee;                 //边框
      border-radius: 50%;                        //圆角
      //padding: 10px;                             //内边框
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1); //边框阴影
      margin: -65px auto;                       //外边框 auto左右对齐
      background-color: #ffffff;

      img{
        width: 100%;
        height: 100%;
        border-radius: 50%;
        background-color: #EEEEEE;
      }
    }

    .login-Form{
      position: absolute;           //绝对定位
      width: 100%;
      bottom: 0px;                  //距离底部
      padding: 0px 20px;            //上下0px 左右是20px
      box-sizing: border-box;       //放到盒子里面

      .login_but{
        display: flex;            //流式布局
        justify-content: flex-end; //在流式布局的最后面
      }
      .verifyCode_box{
        display: flex;
        .verify_code{
          width: 70%;
          justify-content: left;
        }

        .verify_img{
          background-size: contain;
          width: 30%;
          height: 45%;
          justify-content: flex-end;
        }
      }
    }
  }

</style>
